<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h2>管理员信息</h2>
    </div>
    <div class="info">
      <h3 class="top"><span>管理员ID:</span>{{ user.id }}</h3>
      <h3><span>账号:</span> {{ user.account }}</h3>
      <h3><span>用户组:</span> {{ user.userGroup }}</h3>
      <h3><span>创建时间:</span> {{ user.ctime | dataFormate }}</h3>
      <h3 class="img">
        <span>管理员图像:</span>
        <!-- <el-image
          style="width: 100px; height: 100px"
          :src="user.imgUrl"
          :fit="fit"
        ></el-image> -->

        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/users/avatar_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="user.imgUrl"
            :src="
              imgUrl
                ? 'http://127.0.0.1:5000/upload/imgs/acc_img/' + imgUrl
                : user.imgUrl
            "
            class="avatar"
            style="width: 100px; height: 100px"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </h3>
      <el-button type="primary" @click="handlePic">提交</el-button>
    </div>
  </el-card>
</template>

<script>
import { dateFor } from '@/util/dateFormat'
import { updateUserPic } from '@/req/userAjax'
import { alterSuccess, alterError } from '@/util/msgTips'

export default {
  data () {
    return {
      fit: 'cover',
      imgUrl: ''
    }
  },
  props: {
    user: {
      type: Object,
      default: () => {},
      require: true
    }
  },
  filters: {
    dataFormate (data) {
      return dateFor(data)
    }
  },
  methods: {
    beforeAvatarUpload (a) {
      console.log(a, 'befor')
    },
    handleAvatarSuccess ({ code, imgUrl }) {
      if (code === 0) {
        this.imgUrl = imgUrl
      }
    },
    handlePic () {
      const { code, msg } = updateUserPic(this.imgUrl)
      if (code === 0) {
        alterSuccess(msg)
      } else {
        alterError(msg)
      }
    }
  }
  // watch: {
  //   user: {
  //     handler: function (val) {
  //       console.log(val, 'w')
  //     }
  //   }
  // }
}
</script>

<style lang="less" scoped>
.top {
  margin-top: 0 !important;
}
h3 {
  font-size: 18px;
  margin-top: 20px;
  border-bottom: 1px solid #ccc;
  font-weight: normal;
  padding: 20px;
  span {
    margin-right: 20px;
  }
}

.info {
  display: flex;
  flex-direction: column;
}

.img {
  display: flex;
  align-items: center;
  border-radius: 5px;
  overflow: hidden;
}
/deep/.avatar {
  border-radius: 5px;
  border: 1px solid #ccc;
}

.el-image {
  margin-left: 20px;
}
</style>
